<template>
  <page-meta :page-style="$theme.pageStyle"></page-meta>

  <view class="body-content">
    <view class="page-tip">
      <image class="tip-pic" :src="`${$domain}/static/icons/guest/idea.svg`" mode="aspectFit"></image>
      <view class="tip-title">温馨提示</view>
      <view class="tip-text">
        您录入的信息提交后将被平台进行核实
      </view>
    </view>
    <view class="page-form">
      <view class="form-item">
        <textarea @input="sumFontNum" maxlength=300 class="item-textarea" v-model="formData.title"
                  placeholder="请输入内容，比如您这一刻的想法"></textarea>
        <view class="item-number" :style="{color: fontNum >= 300 ? '#ff5500' : '#999999'}">
          {{ fontNum }}/300
        </view>
      </view>
      <view class="page-picList">
        <view class="picList-item" v-for="(item,index) in albumList" :key="index">
          <u-icon @click="deletePic(index)" color="#ff5500" name="close-circle-fill" size="50rpx"
                  class="item-close"></u-icon>
          <image mode="aspectFill" class="picList-item" :src="item"></image>
        </view>
        <image mode="aspectFill" class="picList-item" @click="uploadPic"
               :src="`${$domain}/static/icons/public/uploadPic.svg`"></image>
      </view>
      <view class="page-address" @click="chooseMap">
        <view class="address-con">
          <u-icon name="map-fill" size="40rpx" color="#999"></u-icon>
          <view class="address-text" v-if="formData.map_content">{{ formData.map_content }}</view>
          <view class="address-text" v-else>点击选择位置</view>
        </view>
      </view>
    </view>
    <view class="page-bottom">
      <view class="bottom-btn" @click="submitForm">
        提交
      </view>
    </view>
    <view class="page-bottomFooter"></view>
  </view>
</template>
<script lang="ts" setup>
import {onShow} from "@dcloudio/uni-app";
import {reactive, ref} from "vue"
import {releaseDynamicApi} from "@/api/new";
import {uploadImage} from "@/api/app";
import {useUserStore} from "@/stores/user";
import {getUserLocation} from "@/hooks/userLocation";


const formData = reactive({
  title: '',
  image_list: '',
  map_content: '',
})

let fontNum = ref(0)
const sumFontNum = (e: any) => {
  fontNum.value = e.detail.value.length
}

let albumList = ref([])
const userStore = useUserStore()
const uploadImageIng = async (file: string) => {
  uni.showLoading({
    title: '正在上传中...'
  })
  try {
    const res: any = await uploadImage(file, userStore.temToken!)
    albumList.value.push(res.uri)
    uni.hideLoading()
  } catch (error) {
    uni.hideLoading()
    uni.$u.toast(error)
  }
}


const uploadPic = () => {
  uni.chooseImage({
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    extension: ['png', 'jpeg', 'jpg'], //根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。
    sourceType: ['album'], //从相册选择
    success: function (res) {
      const tempFilePaths = res.tempFilePaths;
      for (let i = 0; i < tempFilePaths.length; i++) {
        uploadImageIng(tempFilePaths[i])
      }
    }
  });
}

onShow(async () => {
  await getUserLocation()
})


const locationInfo = ref()

try {
  locationInfo.value = uni.getStorageSync('location')
} catch (err) {
  console.log('err', err)
}

const releaseDynamic = async () => {
  await releaseDynamicApi(formData)
  uni.navigateBack()
}

const deletePic = (index: any) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该图片吗？',
    success: async function (res) {
      if (res.confirm) {
        albumList.value.splice(index, 1)
        uni.showToast({
          title: '删除成功',
          icon: 'none'
        })
      }
    }
  });
}

const submitForm = () => {
  if (!formData.title) {
    uni.showToast({
      title: '请输入内容',
      icon: 'none'
    })
    return;
  }
  formData.image_list = JSON.stringify(albumList.value)
  releaseDynamic()
}


const chooseMap = () => {
  uni.chooseLocation({
    success: function (res) {
      console.log('位置名称：' + res.name);
      console.log('详细地址：' + res.address);
      console.log('纬度：' + res.latitude);
      console.log('经度：' + res.longitude);
      formData.map_content = res.name
    },
    fail (err) {
      console.log('err',err)
    }
  });
}
</script>

<style>
page {
  background-color: #F0F7FF;
}
</style>

<style scoped lang="scss">
.page-picList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  padding: 30rpx 0;

  .picList-item {
    width: 100%;
    height: 200rpx;
    border-radius: 20rpx;
    position: relative;

    .item-close {
      position: absolute;
      right: 0;
      top: 0;
      transform: translate(50%, -50%);
      z-index: 1;
    }
  }
}

.page-address {
  padding-bottom: 30rpx;
  .address-con {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    color: #999999;
    background-color: #F0F7FF;
    border-radius: 40rpx;
    padding: 15rpx 30rpx;
  }
  .address-icon {
    flex-shrink: 0;
  }
  .address-text {
    font-size: 28rpx;
    margin-left: 20rpx;
  }
}

.page-tip {
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 24rpx;
  color: #90BBEC;

  .tip-pic {
    width: 30rpx;
    height: 30rpx;
  }

  .tip-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #90BBEC;
    margin: 0 10rpx;
  }
}

.page-form {
  width: calc(100% - 60rpx);
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 0 30rpx;

  .form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 28rpx;
    font-weight: bold;
    color: #111111;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #eeeeee;

    .item-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .right-tip {
        color: #999999;
      }

      .right-input {
        background-color: transparent;
        border: none;
        text-align: right;
      }
    }

    .item-textarea {
      width: 100%;
      height: 300rpx;
      margin-top: 20rpx;
    }

    .item-number {
      text-align: right;
      color: #999999;
      font-size: 24rpx;
      font-weight: normal;
    }
  }
}

.page-bottom {
  width: 100%;
  padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom));
  position: fixed;
  bottom: 0;
  z-index: 2;

  .bottom-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-image: linear-gradient(to right, var(--color-primary), var(--color-minor));
    color: #ffffff;
    font-size: 30rpx;
    font-weight: bold;
    border-radius: 40rpx;
  }

  &Footer {
    height: calc(140rpx + env(safe-area-inset-bottom));
  }
}
</style>